<template>
	<div class="layout-padding">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="部门" name="deptSort"></el-tab-pane>
			<el-tab-pane label="区域" name="areaSort"></el-tab-pane>
			<el-tab-pane label="分项" name="subitemSort"></el-tab-pane>
			<el-tab-pane label="支路" name="branchSort"></el-tab-pane>
			<el-tab-pane label="设备" name="devSort"></el-tab-pane>
		</el-tabs>
		<div class="content">
			<div class="level">
				<div class="level-l">
					<div class="head" v-if="activeName != 'subitemSort' && activeName != 'branchSort'">能耗分类</div>
					<div class="shui-dian" v-if="activeName != 'subitemSort' && activeName != 'branchSort'">
						<span v-for="(item, index) in sortData" :key="index" :class="[sdIndex == item.value ? 'active' : '']" @click="queryData(item)">{{
							item.label
						}}</span>
					</div>

					<div class="head">统计对象</div>
					<div :class="[(activeName !== 'subitemSort' && activeName !== 'branchSort') ? 'dept2':'dept']">
						<el-scrollbar class="data-scrollbar">
							<el-input placeholder="输入关键字进行过滤" v-model="deptName" style="margin-bottom: 10px"> </el-input>
							<el-tree
								multiple
								checkStrictly
								show-checkbox
								default-expand-all
								ref="deptTree"
								node-key="id"
								placeholder="请选择 上级部门"
								:data="treeData"
								:props="treeDataProps"
								:current-node-key="currentNodeKey"
								:filter-node-method="filterNode"
								:highlight-current="true"
								:expand-on-click-node="false"
								@node-click="getNodeData"
							></el-tree>
						</el-scrollbar>
					</div>
				</div>
				<div class="level-r">
					<el-form ref="queryRef" :inline="true" :model="queryForm" @keyup.enter="getDataList">
						<el-form-item label="统计周期: ">
							<el-select placeholder="请选择" v-model="queryForm.dataType" style="width: 100px; margin-right: 20px" @change="changeFormat">
								<el-option label="日" value="daterange"></el-option>
								<el-option label="月" value="monthrange"></el-option>
								<el-option label="年" value="yearrange"></el-option>
							</el-select>
							<el-date-picker
								:type="queryForm.dataType"
								v-model="queryForm.date"
								:disabled-date="pickerOptions1"
								:format="formatDate"
								placeholder="请选择"
							/>
						</el-form-item>
						<el-form-item>
							<el-select placeholder="请选择" v-model="queryForm.type" style="width: 100px; margin-right: 20px">
								<el-option label="碳中和" value="1"></el-option>
								<el-option label="标准煤" value="2"></el-option>
								<el-option label="碳排放" value="3"></el-option>
								<el-option label="碳转树" value="4"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
							<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
						</el-form-item>
					</el-form>
					<div>
						<div id="chart" style="width: 100%; height: 600px"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="">
import { ref, reactive, onMounted } from 'vue';
import { getRankList, getPowerSubitem, deptConfigData } from '/@/api/consumptionmanagement/energyanalysis/rank';
import echarts from '/@/utils/chart';
import { dataType } from 'element-plus/es/components/table-v2/src/common';
import moment from 'moment';
import { useMessage, useMessageBox } from '/@/hooks/message';

const headStyle = 'background-color: red;';
const activeName = ref('deptSort');
const order = ref('asc');
const sdIndex = ref(1);
const sortData = ref([]);
const queryRef = ref();
const alleywayUnit = ref('kwh');
const tableList = ref([]);
const loading = ref(false);
const queryForm = reactive({
	dataType: 'daterange',
	date: [new Date(), new Date()],
	type: '1',
});
const column = [
	{
		type: 'input',
		label: '能源节点',
		prop: 'sortName',
		overHidden: true,
	},
	{
		type: 'input',
		label: '能耗占比',
		prop: 'percent',
		overHidden: true,
	},
];
const pickerOptions1 = (time) => {
	return time.getTime() > Date.now();
};
const tableOption = reactive({
	border: true,
	excelBtn: true,
	gridBtn: false,
	index: false,
	stripe: true,
	labelWidth: '160',
	indexWidth: '60',
	menuAlign: 'center',
	align: 'center',
	addBtn: false,
	menu: false,
	maxHeight: 600,
	fit: true,
	refreshBtn: false,
	columnBtn: false,
	searchMenuSpan: 6,
	searchLabelWidth: 'auto',
	searchMenuPosition: 'left',
	defaultSort: {
		prop: 'incrValue',
		order: 'descending',
	},
	column: [],
});
const formatDate = ref('YYYY-MM-DD');
const deptName = ref('');
const deptTree = ref();
const treeData = ref([]);
const treeDataProps = ref({
	label: 'name',
	value: 'id',
});
const initChart = (xData, yData) => {
	const chart = echarts.init(document.getElementById('chart') as HTMLElement);
	const option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		grid: {
			top: '1%',
		},
		toolbox: {
			show: true,
			feature: {
				magicType: { type: ['line', 'bar'] },
				restore: {},
				saveAsImage: {},
			},
		},
		xAxis: {
			type: 'value',
		},
		yAxis: {
			type: 'category',
			data: xData,
		},
		series: [
			{
				name: '能耗值',
				type: 'bar',
				stack: 'total',
				label: {
					show: true,
					position: 'right',
				},
				emphasis: {
					focus: 'series',
				},
				data: yData,
			},
		],
	};
	chart.setOption(option);
};
const changeFormat = (val) => {
	formatDate.value = val == 'daterange' ? 'YYYY-MM-DD' : val == 'monthrange' ? 'YYYY-MM' : 'YYYY';
};
const getTreeData = (type) => {
	let str;
	if (activeName.value == 'deptSort') {
		str = 'dimdept';
	} else if (activeName.value == 'areaSort') {
		str = 'dimarea';
	} else if (activeName.value == 'subitemSort') {
		str = 'dimSubitem';
	} else if (activeName.value == 'branchSort') {
		str = 'dimBranch';
	} else if (activeName.value == 'devSort') {
		str = 'dimKeq';
	}
	deptConfigData(type, str).then((res) => {
		treeData.value = res.data?.map((item) => {
			return {
				...item,
				disabled: true,
			};
		});
	});
};
const handleClick = (tab, event) => {
	activeName.value = tab.props.name;
	if (activeName.value == 'deptSort') {
		getTreeData(1);
	} else if (activeName.value == 'areaSort') {
		getTreeData(1);
	} else if (activeName.value == 'subitemSort') {
		getTreeData();
	} else if (activeName.value == 'branchSort') {
		getTreeData();
	} else if (activeName.value == 'devSort') {
		getTreeData(1);
	}
};
const queryData = (item) => {
	sdIndex.value = item.value;
	if (item.value == 1) {
		alleywayUnit.value = 'kwh';
	} else if (item.value == 2) {
		alleywayUnit.value = 't';
	} else if (item.value == 3) {
		alleywayUnit.value = 'm³';
	}
	getDataList();
};
const getDataList = () => {
	let depts = deptTree.value.getCheckedKeys();
	if (depts.length > 6) {
		useMessage().warning('统计对象最多可选择6个');
		return;
	}
	if (!queryForm.date) {
		useMessage().warning('请选择日期');
		return;
	}
	loading.value = true;
	let date =
		queryForm.dataType == 'daterange'
			? [moment(queryForm.date[0]).format('YYYY-MM-DD'), moment(queryForm.date[1]).format('YYYY-MM-DD')]
			: queryForm.dataType == 'monthrange'
			? [moment(queryForm.date[0]).format('YYYY-MM'), moment(queryForm.date[1]).format('YYYY-MM')]
			: [moment(queryForm.date[0]).format('YYYY'), moment(queryForm.date[1]).format('YYYY')];

	getRankList(
		{
			ids: depts.join(','),
			order: order.value,
			energyType: sdIndex.value,
			startDate: date[0],
			endDate: date[1],
		},
		activeName.value
	).then((res) => {
		tableList.value = res.data;
		let arr = [
			{
				type: 'input',
				sortable: true,
				label: '能耗值(' + alleywayUnit.value + ')',
				prop: 'incrValue',
				overHidden: true,
			},
		];
		tableOption.column = [...column, ...arr];
		let xData = [];
		let yData = [];
		res.data.forEach((item) => {
			xData.push(item.sortName);
			yData.push(item.incrValue);
		});
		initChart(xData, yData);
		loading.value = false;
	});
};
onMounted(() => {
	getTreeData(1);
	getPowerSubitem().then((res) => {
		sortData.value = res.data;
	});
	getDataList();
});
</script>
<style scoped lang="scss">
::v-deep .demo-tabs {
	background: #fff;
	padding: 10px;
	.el-tabs__header {
		margin-bottom: 0;
		display: inline-block;
	}
	.el-tabs__nav-wrap:after {
		background-color: initial;
	}
	.el-tabs__item {
		margin: 0 10px;
	}
}
.data-scrollbar {
	.area-item {
		margin: 10px 30px;
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
		span {
			display: inline-block;
			width: 320px;
			height: 36px;
			line-height: 36px;
			border-radius: 4px;
			font-size: 15px;
			text-align: center;
			transition: all 0.5s;
			cursor: pointer;
			border: 1px solid #efefef;
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
	}
}
.dept,.dept2,
.area {
	padding: 0 10px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}
.content {
	margin-top: 10px;
	height: calc(100% - 73px);
}
.dept {
  height: calc(100% - 67px);
}
.dept2 {
  height: calc(100% - 67px - 87px - 67px);
}
.level {
	display: flex;
	height: 100%;
	margin-top: 10px;
	.level-l {
		width: 20%;
		background: #fff;
		margin-right: 6px;
	}
	.level-r {
		width: 80%;
		padding: 20px;
		background: #fff;
		margin-left: 6px;
	}
	.shui-dian {
		border-top: 1px solid #eee;
		padding: 20px;
		// text-align: center;
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
		span {
			display: inline-block;
			width: 80px;
			height: 36px;
			line-height: 36px;
			border-radius: 4px;
			color: #333;
			margin-right: 10px;
			margin-top: 10px;
			text-align: center;
			transition: all 0.5s;
			cursor: pointer;
			border: 1px solid #efefef;
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
	}
	.condition {
		height: 64px;
		border: 1px solid #efefef;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 10px;
	}
	.data-area {
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		.item {
			width: calc((100% - 20px) / 3);
			height: 200px;
			background: #fff;
		}
		.head-num {
			border-top: 1px solid #efefef;
			padding-top: 40px;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
			font {
				font-size: 18px;
				margin-left: 10px;
			}
		}
	}
	.level-content {
		position: relative;
		background: #fff;
		margin-top: 10px;
		padding: 0 10px;
		width: calc(100% - 20px);
		.data-table {
			margin-top: 30px;
		}
		.unit {
			position: absolute;
			left: 20px;
			top: 10px;
			font-size: 14px;
			font-weight: 700;
		}
	}
}
.head {
	padding: 20px 10px;
	position: relative;
	font-size: 18px;
	padding-left: 25px;
	&:before {
		content: '';
		width: 2px;
		position: absolute;
		height: 24px;
		left: 10px;
		background: var(--el-color-primary);
	}
}
</style>
